



<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      
      
        <link rel="canonical" href="https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html/board/">
      
      
        <meta name="author" content="rexrainbow">
      
      
        <meta name="lang:clipboard.copy" content="Copy to clipboard">
      
        <meta name="lang:clipboard.copied" content="Copied to clipboard">
      
        <meta name="lang:search.language" content="en">
      
        <meta name="lang:search.pipeline.stopwords" content="True">
      
        <meta name="lang:search.pipeline.trimmer" content="True">
      
        <meta name="lang:search.result.none" content="No matching documents">
      
        <meta name="lang:search.result.one" content="1 matching document">
      
        <meta name="lang:search.result.other" content="# matching documents">
      
        <meta name="lang:search.tokenizer" content="[\s\-]+">
      
      <link rel="shortcut icon" href="../images/logo.svg">
      <meta name="generator" content="mkdocs-1.0.4, mkdocs-material-4.6.3">
    
    
      
        <title>Board - Notes of Phaser 3</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/application.adb8469c.css">
      
        <link rel="stylesheet" href="../assets/stylesheets/application-palette.a8b3c06d.css">
      
      
        
        
        <meta name="theme-color" content="#2196f3">
      
    
    
      <script src="../assets/javascripts/modernizr.86422ebf.js"></script>
    
    
      
        <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700%7CRoboto+Mono&display=fallback">
        <style>body,input{font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}code,kbd,pre{font-family:"Roboto Mono","Courier New",Courier,monospace}</style>
      
    
    <link rel="stylesheet" href="../assets/fonts/material-icons.css">
    
    
    
      
        
<script>
  window.ga = window.ga || function() {
    (ga.q = ga.q || []).push(arguments)
  }
  ga.l = +new Date
  /* Setup integration and send page view */
  ga("create", "UA-119804412-1", "auto")
  ga("set", "anonymizeIp", true)
  ga("send", "pageview")
  /* Register handler to log search on blur */
  document.addEventListener("DOMContentLoaded", () => {
    if (document.forms.search) {
      var query = document.forms.search.query
      query.addEventListener("blur", function() {
        if (this.value) {
          var path = document.location.pathname;
          ga("send", "pageview", path + "?q=" + this.value)
        }
      })
    }
  })
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
      
    
    
  </head>
  
    
    
    <body dir="ltr" data-md-color-primary="blue" data-md-color-accent="blue">
  
    <svg class="md-svg">
      <defs>
        
        
          <svg xmlns="http://www.w3.org/2000/svg" width="416" height="448" viewBox="0 0 416 448" id="__github"><path fill="currentColor" d="M160 304q0 10-3.125 20.5t-10.75 19T128 352t-18.125-8.5-10.75-19T96 304t3.125-20.5 10.75-19T128 256t18.125 8.5 10.75 19T160 304zm160 0q0 10-3.125 20.5t-10.75 19T288 352t-18.125-8.5-10.75-19T256 304t3.125-20.5 10.75-19T288 256t18.125 8.5 10.75 19T320 304zm40 0q0-30-17.25-51T296 232q-10.25 0-48.75 5.25Q229.5 240 208 240t-39.25-2.75Q130.75 232 120 232q-29.5 0-46.75 21T56 304q0 22 8 38.375t20.25 25.75 30.5 15 35 7.375 37.25 1.75h42q20.5 0 37.25-1.75t35-7.375 30.5-15 20.25-25.75T360 304zm56-44q0 51.75-15.25 82.75-9.5 19.25-26.375 33.25t-35.25 21.5-42.5 11.875-42.875 5.5T212 416q-19.5 0-35.5-.75t-36.875-3.125-38.125-7.5-34.25-12.875T37 371.5t-21.5-28.75Q0 312 0 260q0-59.25 34-99-6.75-20.5-6.75-42.5 0-29 12.75-54.5 27 0 47.5 9.875t47.25 30.875Q171.5 96 212 96q37 0 70 8 26.25-20.5 46.75-30.25T376 64q12.75 25.5 12.75 54.5 0 21.75-6.75 42 34 40 34 99.5z"/></svg>
        
      </defs>
    </svg>
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" data-md-component="overlay" for="__drawer"></label>
    
      <a href="#introduction" tabindex="0" class="md-skip">
        Skip to content
      </a>
    
    
      <header class="md-header" data-md-component="header">
  <nav class="md-header-nav md-grid">
    <div class="md-flex">
      <div class="md-flex__cell md-flex__cell--shrink">
        <a href="https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html" title="Notes of Phaser 3" aria-label="Notes of Phaser 3" class="md-header-nav__button md-logo">
          
            <i class="md-icon">memory</i>
          
        </a>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        <label class="md-icon md-icon--menu md-header-nav__button" for="__drawer"></label>
      </div>
      <div class="md-flex__cell md-flex__cell--stretch">
        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
          
            <span class="md-header-nav__topic">
              Notes of Phaser 3
            </span>
            <span class="md-header-nav__topic">
              
                Board
              
            </span>
          
        </div>
      </div>
      <div class="md-flex__cell md-flex__cell--shrink">
        
          <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
          
<div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" aria-label="search" name="query" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="query" data-md-state="active">
      <label class="md-icon md-search__icon" for="__search"></label>
      <button type="reset" class="md-icon md-search__icon" data-md-component="reset" tabindex="-1">
        &#xE5CD;
      </button>
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="result">
          <div class="md-search-result__meta">
            Type to start searching
          </div>
          <ol class="md-search-result__list"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
        
      </div>
      
        <div class="md-flex__cell md-flex__cell--shrink">
          <div class="md-header-nav__source">
            


  

<a href="https://github.com/rexrainbow/phaser3-rex-notes/" title="Go to repository" class="md-source" data-md-source="github">
  
    <div class="md-source__icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <use xlink:href="#__github" width="24" height="24"></use>
      </svg>
    </div>
  
  <div class="md-source__repository">
    phaser3-rex-notes
  </div>
</a>
          </div>
        </div>
      
    </div>
  </nav>
</header>
    
    <div class="md-container">
      
        
      
      
      <main class="md-main" role="main">
        <div class="md-main__inner md-grid" data-md-component="container">
          
            
              <div class="md-sidebar md-sidebar--primary" data-md-component="navigation">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    <nav class="md-nav md-nav--primary" data-md-level="0">
  <label class="md-nav__title md-nav__title--site" for="__drawer">
    <a href="https://rexrainbow.github.io/phaser3-rex-notes/docs/site/index.html" title="Notes of Phaser 3" class="md-nav__button md-logo">
      
        <i class="md-icon">memory</i>
      
    </a>
    Notes of Phaser 3
  </label>
  
    <div class="md-nav__source">
      


  

<a href="https://github.com/rexrainbow/phaser3-rex-notes/" title="Go to repository" class="md-source" data-md-source="github">
  
    <div class="md-source__icon">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <use xlink:href="#__github" width="24" height="24"></use>
      </svg>
    </div>
  
  <div class="md-source__repository">
    phaser3-rex-notes
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      


  <li class="md-nav__item">
    <a href=".." title="Home" class="md-nav__link">
      Home
    </a>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-2" type="checkbox" id="nav-2">
    
    <label class="md-nav__link" for="nav-2">
      System
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-2">
        System
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-2-1" type="checkbox" id="nav-2-1">
    
    <label class="md-nav__link" for="nav-2-1">
      Game
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-2-1">
        Game
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../game/" title="Game" class="md-nav__link">
      Game
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../mainloop/" title="Main loop" class="md-nav__link">
      Main loop
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-2-2" type="checkbox" id="nav-2-2">
    
    <label class="md-nav__link" for="nav-2-2">
      Scene
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-2-2">
        Scene
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../scene/" title="Scene" class="md-nav__link">
      Scene
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../scenemanager/" title="Scene manager" class="md-nav__link">
      Scene manager
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../scalemanager/" title="Scale manager" class="md-nav__link">
      Scale manager
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../fullscreen/" title="Full screen" class="md-nav__link">
      Full screen
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../orientation/" title="Orientation" class="md-nav__link">
      Orientation
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../snapshot/" title="Snapshot" class="md-nav__link">
      Snapshot
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../device/" title="Device" class="md-nav__link">
      Device
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../pluginsystem/" title="Plugin system" class="md-nav__link">
      Plugin system
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-3" type="checkbox" id="nav-3">
    
    <label class="md-nav__link" for="nav-3">
      Loader
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-3">
        Loader
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../loader/" title="Loader" class="md-nav__link">
      Loader
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../webfontloader/" title="Webfont loader" class="md-nav__link">
      Webfont loader
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../awaitloader/" title="Await loader" class="md-nav__link">
      Await loader
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../scripttagloader/" title="Script tag loader" class="md-nav__link">
      Script tag loader
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../imageuriloader/" title="Image URI loader" class="md-nav__link">
      Image URI loader
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4" type="checkbox" id="nav-4">
    
    <label class="md-nav__link" for="nav-4">
      Game object
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-4">
        Game object
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../gameobject/" title="Game object" class="md-nav__link">
      Game object
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-2" type="checkbox" id="nav-4-2">
    
    <label class="md-nav__link" for="nav-4-2">
      Sprite
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-2">
        Sprite
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-2-1" type="checkbox" id="nav-4-2-1">
    
    <label class="md-nav__link" for="nav-4-2-1">
      Single image
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-2-1">
        Single image
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../image/" title="Image" class="md-nav__link">
      Image
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../sprite/" title="Sprite" class="md-nav__link">
      Sprite
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../animation/" title="Animation" class="md-nav__link">
      Animation
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../video/" title="Video" class="md-nav__link">
      Video
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../circlemaskimage/" title="Circle mask image" class="md-nav__link">
      Circle mask image
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-2-2" type="checkbox" id="nav-4-2-2">
    
    <label class="md-nav__link" for="nav-4-2-2">
      Multiple images
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-2-2">
        Multiple images
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../blitter/" title="Blitter" class="md-nav__link">
      Blitter
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-2-2-2" type="checkbox" id="nav-4-2-2-2">
    
    <label class="md-nav__link" for="nav-4-2-2-2">
      Particles
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="4">
      <label class="md-nav__title" for="nav-4-2-2-2">
        Particles
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../particles/" title="Particles" class="md-nav__link">
      Particles
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../bitmapzone/" title="Bitmap zone" class="md-nav__link">
      Bitmap zone
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../tilesprite/" title="Tile sprite" class="md-nav__link">
      Tile sprite
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ninepatch/" title="Nine patch" class="md-nav__link">
      Nine patch
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../line/" title="Line" class="md-nav__link">
      Line
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-2-3" type="checkbox" id="nav-4-2-3">
    
    <label class="md-nav__link" for="nav-4-2-3">
      Shader
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-2-3">
        Shader
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../shader/" title="Shader" class="md-nav__link">
      Shader
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../effectlayer-outline/" title="Outline effect layer" class="md-nav__link">
      Outline effect layer
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-2-4" type="checkbox" id="nav-4-2-4">
    
    <label class="md-nav__link" for="nav-4-2-4">
      Mesh
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-2-4">
        Mesh
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../quad/" title="Quad" class="md-nav__link">
      Quad
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../rope/" title="Rope" class="md-nav__link">
      Rope
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../texture/" title="Texture" class="md-nav__link">
      Texture
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-3" type="checkbox" id="nav-4-3">
    
    <label class="md-nav__link" for="nav-4-3">
      Text
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-3">
        Text
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-3-1" type="checkbox" id="nav-4-3-1">
    
    <label class="md-nav__link" for="nav-4-3-1">
      Canvas text
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-3-1">
        Canvas text
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../text/" title="Text" class="md-nav__link">
      Text
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../bbcodetext/" title="BBCode Text" class="md-nav__link">
      BBCode Text
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../tagtext/" title="Tag Text" class="md-nav__link">
      Tag Text
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-3-2" type="checkbox" id="nav-4-3-2">
    
    <label class="md-nav__link" for="nav-4-3-2">
      Bitmap text
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-3-2">
        Bitmap text
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../bitmaptext/" title="Static bitmap text" class="md-nav__link">
      Static bitmap text
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../dynamicbitmaptext/" title="Dynamic bitmap text" class="md-nav__link">
      Dynamic bitmap text
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-3-3" type="checkbox" id="nav-4-3-3">
    
    <label class="md-nav__link" for="nav-4-3-3">
      Behaviors
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-3-3">
        Behaviors
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../texttyping/" title="Typing" class="md-nav__link">
      Typing
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../textpage/" title="Page" class="md-nav__link">
      Page
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../textedit/" title="Edit" class="md-nav__link">
      Edit
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-4" type="checkbox" id="nav-4-4">
    
    <label class="md-nav__link" for="nav-4-4">
      Graphics
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-4">
        Graphics
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../graphics/" title="Graphics" class="md-nav__link">
      Graphics
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../rendertexture/" title="Render texture" class="md-nav__link">
      Render texture
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-4-3" type="checkbox" id="nav-4-4-3">
    
    <label class="md-nav__link" for="nav-4-4-3">
      Shape
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-4-3">
        Shape
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-rectangle/" title="Rectangle" class="md-nav__link">
      Rectangle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-circle/" title="Circle" class="md-nav__link">
      Circle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-arc/" title="Arc" class="md-nav__link">
      Arc
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-line/" title="Line" class="md-nav__link">
      Line
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-ellipse/" title="Ellipse" class="md-nav__link">
      Ellipse
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-polygon/" title="Polygon" class="md-nav__link">
      Polygon
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-curve/" title="Curve" class="md-nav__link">
      Curve
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-star/" title="Star" class="md-nav__link">
      Star
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-triangle/" title="Triangle" class="md-nav__link">
      Triangle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-grid/" title="Grid" class="md-nav__link">
      Grid
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-isobox/" title="Iso box" class="md-nav__link">
      Iso box
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-isotriangle/" title="Iso triangle" class="md-nav__link">
      Iso triangle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shape-roundrectangle/" title="Round Rectangle" class="md-nav__link">
      Round Rectangle
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../canvas/" title="Canvas" class="md-nav__link">
      Canvas
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../canvas-texture/" title="Canvas texture" class="md-nav__link">
      Canvas texture
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-5" type="checkbox" id="nav-4-5">
    
    <label class="md-nav__link" for="nav-4-5">
      Tile map
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-5">
        Tile map
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../tilemap/" title="Tile map" class="md-nav__link">
      Tile map
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-6" type="checkbox" id="nav-4-6">
    
    <label class="md-nav__link" for="nav-4-6">
      Container
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-6">
        Container
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../container/" title="Container" class="md-nav__link">
      Container
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../containerlite/" title="Container Lite" class="md-nav__link">
      Container Lite
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gridtable/" title="Grid table" class="md-nav__link">
      Grid table
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../zone/" title="Zone" class="md-nav__link">
      Zone
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-8" type="checkbox" id="nav-4-8">
    
    <label class="md-nav__link" for="nav-4-8">
      Object pool
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-8">
        Object pool
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../group/" title="Group" class="md-nav__link">
      Group
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-9" type="checkbox" id="nav-4-9">
    
    <label class="md-nav__link" for="nav-4-9">
      DOM element
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-9">
        DOM element
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../domelement/" title="DOM element" class="md-nav__link">
      DOM element
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../inputtext/" title="Input text" class="md-nav__link">
      Input text
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../filechooser/" title="File chooser" class="md-nav__link">
      File chooser
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../youtubeplayer/" title="Youtube player" class="md-nav__link">
      Youtube player
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-10" type="checkbox" id="nav-4-10">
    
    <label class="md-nav__link" for="nav-4-10">
      Behaviors
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-10">
        Behaviors
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-10-1" type="checkbox" id="nav-4-10-1">
    
    <label class="md-nav__link" for="nav-4-10-1">
      Actions
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-10-1">
        Actions
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../groupactions/" title="Group actions" class="md-nav__link">
      Group actions
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gridalign/" title="Quad/Hexagon grid align" class="md-nav__link">
      Quad/Hexagon grid align
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../randomplace/" title="Random place" class="md-nav__link">
      Random place
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../moveto/" title="Move to" class="md-nav__link">
      Move to
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../rotateto/" title="Rotate to" class="md-nav__link">
      Rotate to
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../flash/" title="Flash" class="md-nav__link">
      Flash
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shake-position/" title="Shake position" class="md-nav__link">
      Shake position
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../fadeoutdestroy/" title="Fade out destroy" class="md-nav__link">
      Fade out destroy
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../popup/" title="Pop up" class="md-nav__link">
      Pop up
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../scaledowndestroy/" title="Scale down destroy" class="md-nav__link">
      Scale down destroy
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../flip/" title="Flip" class="md-nav__link">
      Flip
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../easemove/" title="Ease-move" class="md-nav__link">
      Ease-move
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../pathfollower/" title="Path follower" class="md-nav__link">
      Path follower
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../anchor/" title="Anchor" class="md-nav__link">
      Anchor
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../interception/" title="Interception" class="md-nav__link">
      Interception
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../particles-along-bounds/" title="Particles along bounds" class="md-nav__link">
      Particles along bounds
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-10-15" type="checkbox" id="nav-4-10-15">
    
    <label class="md-nav__link" for="nav-4-10-15">
      Arcade
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-10-15">
        Arcade
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-10-15-1" type="checkbox" id="nav-4-10-15-1">
    
    <label class="md-nav__link" for="nav-4-10-15-1">
      Engine
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="4">
      <label class="md-nav__title" for="nav-4-10-15-1">
        Engine
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../arcade-world/" title="World" class="md-nav__link">
      World
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../arcade-body/" title="Body" class="md-nav__link">
      Body
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../arcade-gameobject/" title="Game object" class="md-nav__link">
      Game object
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../buildarcadeobject/" title="Build arcade object" class="md-nav__link">
      Build arcade object
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../eightdirection/" title="8 direction" class="md-nav__link">
      8 direction
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../bullet/" title="Bullet" class="md-nav__link">
      Bullet
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ship/" title="Ship" class="md-nav__link">
      Ship
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-10-16" type="checkbox" id="nav-4-10-16">
    
    <label class="md-nav__link" for="nav-4-10-16">
      Matter.js
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-4-10-16">
        Matter.js
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-10-16-1" type="checkbox" id="nav-4-10-16-1">
    
    <label class="md-nav__link" for="nav-4-10-16-1">
      Engine
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="4">
      <label class="md-nav__title" for="nav-4-10-16-1">
        Engine
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../matterjs-world/" title="World" class="md-nav__link">
      World
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../matterjs-gameobject/" title="Game object" class="md-nav__link">
      Game object
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../matterjs-wrap/" title="Wrap" class="md-nav__link">
      Wrap
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../matterjs-attractor/" title="Attractor" class="md-nav__link">
      Attractor
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-4-11" type="checkbox" id="nav-4-11">
    
    <label class="md-nav__link" for="nav-4-11">
      Display
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-4-11">
        Display
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../mask/" title="Mask" class="md-nav__link">
      Mask
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5" type="checkbox" id="nav-5">
    
    <label class="md-nav__link" for="nav-5">
      Input
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-5">
        Input
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../input/" title="Input" class="md-nav__link">
      Input
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5-2" type="checkbox" id="nav-5-2">
    
    <label class="md-nav__link" for="nav-5-2">
      Touch
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-5-2">
        Touch
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../touchevents/" title="Touch events" class="md-nav__link">
      Touch events
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../cursor/" title="Cursor" class="md-nav__link">
      Cursor
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../mousewheel/" title="Mouse wheel" class="md-nav__link">
      Mouse wheel
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5-2-4" type="checkbox" id="nav-5-2-4">
    
    <label class="md-nav__link" for="nav-5-2-4">
      Gestures
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-5-2-4">
        Gestures
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5-2-4-2" type="checkbox" id="nav-5-2-4-2">
    
    <label class="md-nav__link" for="nav-5-2-4-2">
      One pointer gesture
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="4">
      <label class="md-nav__title" for="nav-5-2-4-2">
        One pointer gesture
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-tap/" title="Tap" class="md-nav__link">
      Tap
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-press/" title="Press" class="md-nav__link">
      Press
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-swipe/" title="Swipe" class="md-nav__link">
      Swipe
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-pan/" title="Pan" class="md-nav__link">
      Pan
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5-2-4-3" type="checkbox" id="nav-5-2-4-3">
    
    <label class="md-nav__link" for="nav-5-2-4-3">
      Two pointers gesture
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="4">
      <label class="md-nav__title" for="nav-5-2-4-3">
        Two pointers gesture
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-pinch/" title="Pinch" class="md-nav__link">
      Pinch
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gesture-rotate/" title="Rotate" class="md-nav__link">
      Rotate
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../button/" title="Button" class="md-nav__link">
      Button
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../drag/" title="Drag" class="md-nav__link">
      Drag
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../slider/" title="Slider" class="md-nav__link">
      Slider
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../scroller/" title="Scroller" class="md-nav__link">
      Scroller
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../virtualjoystick/" title="Virtual joystick" class="md-nav__link">
      Virtual joystick
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../cursoratbound/" title="Cursor at bound" class="md-nav__link">
      Cursor at bound
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../dragrotate/" title="Drag rotate" class="md-nav__link">
      Drag rotate
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../mousewheeltoupdown/" title="Mouse-wheel to up/down" class="md-nav__link">
      Mouse-wheel to up/down
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-5-3" type="checkbox" id="nav-5-3">
    
    <label class="md-nav__link" for="nav-5-3">
      Keyboard
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-5-3">
        Keyboard
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../keyboardevents/" title="Keyboard events" class="md-nav__link">
      Keyboard events
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../keyboardcombo/" title="Combo events" class="md-nav__link">
      Combo events
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-6" type="checkbox" id="nav-6">
    
    <label class="md-nav__link" for="nav-6">
      Audio
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-6">
        Audio
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../audio/" title="Audio" class="md-nav__link">
      Audio
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../fadevolume/" title="Volume fading" class="md-nav__link">
      Volume fading
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7" type="checkbox" id="nav-7">
    
    <label class="md-nav__link" for="nav-7">
      Camera
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-7">
        Camera
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../camera/" title="Camera" class="md-nav__link">
      Camera
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../camera-effects/" title="Effects" class="md-nav__link">
      Effects
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../camera-controllor/" title="Controllor" class="md-nav__link">
      Controllor
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7-4" type="checkbox" id="nav-7-4">
    
    <label class="md-nav__link" for="nav-7-4">
      Shader effects
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-7-4">
        Shader effects
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../render-pipeline/" title="Render pipeline" class="md-nav__link">
      Render pipeline
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../camera-shader-effect/" title="Shader effect" class="md-nav__link">
      Shader effect
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7-4-3" type="checkbox" id="nav-7-4-3">
    
    <label class="md-nav__link" for="nav-7-4-3">
      Color
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-7-4-3">
        Color
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-glowfilter/" title="Glow" class="md-nav__link">
      Glow
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-grayscale/" title="Gray scale" class="md-nav__link">
      Gray scale
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-inverse/" title="Inverse" class="md-nav__link">
      Inverse
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-hsladjust/" title="HSL adjust" class="md-nav__link">
      HSL adjust
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7-4-4" type="checkbox" id="nav-7-4-4">
    
    <label class="md-nav__link" for="nav-7-4-4">
      Outline
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-7-4-4">
        Outline
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-outline/" title="Outline" class="md-nav__link">
      Outline
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-toonify/" title="Toonify" class="md-nav__link">
      Toonify
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-7-4-5" type="checkbox" id="nav-7-4-5">
    
    <label class="md-nav__link" for="nav-7-4-5">
      Position
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-7-4-5">
        Position
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-swirl/" title="Swirl" class="md-nav__link">
      Swirl
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../shader-pixelation/" title="Pixelation" class="md-nav__link">
      Pixelation
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-8" type="checkbox" id="nav-8">
    
    <label class="md-nav__link" for="nav-8">
      Tween
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-8">
        Tween
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../tween/" title="Tween task" class="md-nav__link">
      Tween task
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../tween-timeline/" title="Timeline" class="md-nav__link">
      Timeline
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9" type="checkbox" id="nav-9">
    
    <label class="md-nav__link" for="nav-9">
      Logic
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-9">
        Logic
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9-1" type="checkbox" id="nav-9-1">
    
    <label class="md-nav__link" for="nav-9-1">
      Events
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-9-1">
        Events
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../eventemitter3/" title="Event emitter" class="md-nav__link">
      Event emitter
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../waitevents/" title="Wait events" class="md-nav__link">
      Wait events
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../eventpromise/" title="Event promise" class="md-nav__link">
      Event promise
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9-2" type="checkbox" id="nav-9-2">
    
    <label class="md-nav__link" for="nav-9-2">
      Run commands
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-9-2">
        Run commands
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../runcommands/" title="Run commands" class="md-nav__link">
      Run commands
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../sequence/" title="Sequence" class="md-nav__link">
      Sequence
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../csvscenario/" title="CSV scenario" class="md-nav__link">
      CSV scenario
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9-2-4" type="checkbox" id="nav-9-2-4">
    
    <label class="md-nav__link" for="nav-9-2-4">
      TCRP
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="3">
      <label class="md-nav__title" for="nav-9-2-4">
        TCRP
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../tcrp-recoder/" title="Recoder" class="md-nav__link">
      Recoder
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../tcrp-player/" title="Player" class="md-nav__link">
      Player
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../fsm/" title="FSM" class="md-nav__link">
      FSM
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9-4" type="checkbox" id="nav-9-4">
    
    <label class="md-nav__link" for="nav-9-4">
      CSV table
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-9-4">
        CSV table
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../conditionstable/" title="Conditions table" class="md-nav__link">
      Conditions table
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-9-5" type="checkbox" id="nav-9-5">
    
    <label class="md-nav__link" for="nav-9-5">
      Quest
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-9-5">
        Quest
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../quest/" title="Quest" class="md-nav__link">
      Quest
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../dialog-quest/" title="Dialog-quest" class="md-nav__link">
      Dialog-quest
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10" type="checkbox" id="nav-10">
    
    <label class="md-nav__link" for="nav-10">
      Data
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-10">
        Data
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10-1" type="checkbox" id="nav-10-1">
    
    <label class="md-nav__link" for="nav-10-1">
      Data manager
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-10-1">
        Data manager
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../datamanager/" title="Built-in data" class="md-nav__link">
      Built-in data
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../restorabledata/" title="Restorable data" class="md-nav__link">
      Restorable data
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../buffdata/" title="Buff data" class="md-nav__link">
      Buff data
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../structs-set/" title="Set" class="md-nav__link">
      Set
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10-3" type="checkbox" id="nav-10-3">
    
    <label class="md-nav__link" for="nav-10-3">
      Array
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-10-3">
        Array
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../array-addremove/" title="Add/remove" class="md-nav__link">
      Add/remove
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../array-sort/" title="Sort" class="md-nav__link">
      Sort
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../array-random/" title="Random" class="md-nav__link">
      Random
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../array-filter/" title="Filter/Map" class="md-nav__link">
      Filter/Map
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../create-number-array/" title="Number array" class="md-nav__link">
      Number array
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../uniqueitemlist/" title="Unique item list" class="md-nav__link">
      Unique item list
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10-5" type="checkbox" id="nav-10-5">
    
    <label class="md-nav__link" for="nav-10-5">
      CSV
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-10-5">
        CSV
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../csvtoarray/" title="CSV to array" class="md-nav__link">
      CSV to array
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../csvtohashtable/" title="CSV to hash table" class="md-nav__link">
      CSV to hash table
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-10-6" type="checkbox" id="nav-10-6">
    
    <label class="md-nav__link" for="nav-10-6">
      Database
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-10-6">
        Database
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../lokijs/" title="LokiJs" class="md-nav__link">
      LokiJs
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../config-data/" title="Configuration data" class="md-nav__link">
      Configuration data
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../canvas-data/" title="Canvas image data" class="md-nav__link">
      Canvas image data
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11" type="checkbox" id="nav-11">
    
    <label class="md-nav__link" for="nav-11">
      Math
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-11">
        Math
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11-1" type="checkbox" id="nav-11-1">
    
    <label class="md-nav__link" for="nav-11-1">
      Max, min
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-11-1">
        Max, min
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../interpolation/" title="Interpolation" class="md-nav__link">
      Interpolation
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../percentage/" title="Percentage" class="md-nav__link">
      Percentage
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../clamp/" title="Clamp" class="md-nav__link">
      Clamp
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../wrap/" title="Wrap" class="md-nav__link">
      Wrap
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ease-function/" title="Ease" class="md-nav__link">
      Ease
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../snap/" title="Snap" class="md-nav__link">
      Snap
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../distance/" title="Distance" class="md-nav__link">
      Distance
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../angle/" title="Angle" class="md-nav__link">
      Angle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11-5" type="checkbox" id="nav-11-5">
    
    <label class="md-nav__link" for="nav-11-5">
      Random
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-11-5">
        Random
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../random/" title="Random number" class="md-nav__link">
      Random number
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../random-data-generator/" title="Random data generator" class="md-nav__link">
      Random data generator
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../gashapon/" title="Gashapon" class="md-nav__link">
      Gashapon
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../perlin/" title="Perlin" class="md-nav__link">
      Perlin
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../color/" title="Color" class="md-nav__link">
      Color
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11-7" type="checkbox" id="nav-11-7">
    
    <label class="md-nav__link" for="nav-11-7">
      Vector
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-11-7">
        Vector
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../vector2/" title="Vector2" class="md-nav__link">
      Vector2
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11-8" type="checkbox" id="nav-11-8">
    
    <label class="md-nav__link" for="nav-11-8">
      Geometry
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-11-8">
        Geometry
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-circle/" title="Circle" class="md-nav__link">
      Circle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-rectangle/" title="Rectangle" class="md-nav__link">
      Rectangle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-line/" title="Line" class="md-nav__link">
      Line
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-point/" title="Point" class="md-nav__link">
      Point
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-ellipse/" title="Ellipse" class="md-nav__link">
      Ellipse
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-triangle/" title="Triangle" class="md-nav__link">
      Triangle
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-polygon/" title="Polygon" class="md-nav__link">
      Polygon
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-rhombus/" title="Rhombus" class="md-nav__link">
      Rhombus
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../geom-hexagon/" title="Hexagon" class="md-nav__link">
      Hexagon
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-11-9" type="checkbox" id="nav-11-9">
    
    <label class="md-nav__link" for="nav-11-9">
      Curve
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-11-9">
        Curve
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../path/" title="Path" class="md-nav__link">
      Path
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../curve-spiral/" title="Spiral curve" class="md-nav__link">
      Spiral curve
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-12" type="checkbox" id="nav-12">
    
    <label class="md-nav__link" for="nav-12">
      String
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-12">
        String
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-12-1" type="checkbox" id="nav-12-1">
    
    <label class="md-nav__link" for="nav-12-1">
      Format
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-12-1">
        Format
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../format/" title="Format" class="md-nav__link">
      Format
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../mustache/" title="Mustache" class="md-nav__link">
      Mustache
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../pad/" title="Pad" class="md-nav__link">
      Pad
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../capitalizes-first/" title="Capitalizes first" class="md-nav__link">
      Capitalizes first
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../reverse-string/" title="Reverse" class="md-nav__link">
      Reverse
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../lzstring/" title="LZ string" class="md-nav__link">
      LZ string
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../xor/" title="XOR" class="md-nav__link">
      XOR
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../uuid/" title="UUID" class="md-nav__link">
      UUID
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../base64/" title="Base64" class="md-nav__link">
      Base64
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-13" type="checkbox" id="nav-13">
    
    <label class="md-nav__link" for="nav-13">
      Time
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-13">
        Time
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../date/" title="Date" class="md-nav__link">
      Date
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../timer/" title="Timer" class="md-nav__link">
      Timer
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../timeline/" title="Timeline" class="md-nav__link">
      Timeline
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../clock/" title="Clock" class="md-nav__link">
      Clock
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../lifetime/" title="Life time" class="md-nav__link">
      Life time
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../awaytime/" title="Away time" class="md-nav__link">
      Away time
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-14" type="checkbox" id="nav-14">
    
    <label class="md-nav__link" for="nav-14">
      UI
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-14">
        UI
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-sizer/" title="Sizer" class="md-nav__link">
      Sizer
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-gridsizer/" title="Grid sizer" class="md-nav__link">
      Grid sizer
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-fixwidthsizer/" title="Fix-width sizer" class="md-nav__link">
      Fix-width sizer
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-overlapsizer/" title="Overlap sizer" class="md-nav__link">
      Overlap sizer
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-label/" title="Label" class="md-nav__link">
      Label
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-textbox/" title="Text box" class="md-nav__link">
      Text box
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-textarea/" title="Text area" class="md-nav__link">
      Text area
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-toast/" title="Toast" class="md-nav__link">
      Toast
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-buttons/" title="Buttons" class="md-nav__link">
      Buttons
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-gridbuttons/" title="Grid buttons" class="md-nav__link">
      Grid buttons
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-fixwidthbuttons/" title="Fix-width buttons" class="md-nav__link">
      Fix-width buttons
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-slider/" title="Slider" class="md-nav__link">
      Slider
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-dialog/" title="Dialog" class="md-nav__link">
      Dialog
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-gridtable/" title="Grid table" class="md-nav__link">
      Grid table
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-tabs/" title="Tabs" class="md-nav__link">
      Tabs
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-menu/" title="Menu" class="md-nav__link">
      Menu
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-numberbar/" title="Number bar" class="md-nav__link">
      Number bar
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-pages/" title="Pages" class="md-nav__link">
      Pages
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-scrollablepanel/" title="Scroll-able panel" class="md-nav__link">
      Scroll-able panel
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-chart/" title="Chart" class="md-nav__link">
      Chart
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../ui-basesizer/" title="Base sizer" class="md-nav__link">
      Base sizer
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      

  


  <li class="md-nav__item md-nav__item--active md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-15" type="checkbox" id="nav-15" checked>
    
    <label class="md-nav__link" for="nav-15">
      Board
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-15">
        Board
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../board-overview/" title="Overview" class="md-nav__link">
      Overview
    </a>
  </li>

        
          
          
          

  


  <li class="md-nav__item md-nav__item--active">
    
    <input class="md-toggle md-nav__toggle" data-md-toggle="toc" type="checkbox" id="__toc">
    
    
      <label class="md-nav__link md-nav__link--active" for="__toc">
        Board
      </label>
    
    <a href="./" title="Board" class="md-nav__link md-nav__link--active">
      Board
    </a>
    
      
<nav class="md-nav md-nav--secondary">
  
  
  
    <label class="md-nav__title" for="__toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    Introduction
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#live-demos" class="md-nav__link">
    Live demos
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#usage" class="md-nav__link">
    Usage
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#install-plugin" class="md-nav__link">
    Install plugin
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#load-minify-file" class="md-nav__link">
    Load minify file
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-plugin" class="md-nav__link">
    Import plugin
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-class" class="md-nav__link">
    Import class
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#add-board-object" class="md-nav__link">
    Add board object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#custom-class" class="md-nav__link">
    Custom class
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#board-size" class="md-nav__link">
    Board size
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#add-chess" class="md-nav__link">
    Add chess
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#kick-out-event" class="md-nav__link">
    Kick-out event
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#remove-chess" class="md-nav__link">
    Remove chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#move-chess" class="md-nav__link">
    Move chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#swap-chess" class="md-nav__link">
    Swap chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#chess-tile-position" class="md-nav__link">
    Chess -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tile-position-chess" class="md-nav__link">
    Tile position -&gt; chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#world-position-chess" class="md-nav__link">
    World position -&gt; chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#contains" class="md-nav__link">
    Contains
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#for-each-tile" class="md-nav__link">
    For each tile
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tile-position-world-position" class="md-nav__link">
    Tile position -&gt; world position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#world-position-tile-position" class="md-nav__link">
    World position -&gt; tile position
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#world-position-grid-world-position" class="md-nav__link">
    World position -&gt; Grid world position
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ring-tile-position" class="md-nav__link">
    Ring -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#shape-tile-position" class="md-nav__link">
    Shape -&gt; tile position
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#line-tile-position" class="md-nav__link">
    Line -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#circle-tile-position" class="md-nav__link">
    Circle -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#rectangle-tile-position" class="md-nav__link">
    Rectangle -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ellipse-tile-position" class="md-nav__link">
    Ellipse -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#triangle-tile-position" class="md-nav__link">
    Triangle -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#polygon-tile-position" class="md-nav__link">
    Polygon -&gt; tile position
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#angle-between-world-position-of-2-tiles" class="md-nav__link">
    Angle between world position of 2 tiles
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#is-angle-in-cone" class="md-nav__link">
    Is angle in cone
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#direction-between-2-tiles" class="md-nav__link">
    Direction between 2 tiles
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#is-direction-in-cone" class="md-nav__link">
    Is direction in cone
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#opposite-direction" class="md-nav__link">
    Opposite direction
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#angle-snap-to-direction" class="md-nav__link">
    Angle snap to direction
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#align-world-position-to-grid" class="md-nav__link">
    Align world position to grid
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#is-overlapping-with-world-position" class="md-nav__link">
    Is overlapping with world position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#neighbors" class="md-nav__link">
    Neighbors
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#neighbor-tile-position" class="md-nav__link">
    Neighbor tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#neighbor-chess" class="md-nav__link">
    Neighbor chess
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tile-at-direction" class="md-nav__link">
    Tile at direction
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#empty-tile-position" class="md-nav__link">
    Empty tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#get-all-chess" class="md-nav__link">
    Get all chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#fit" class="md-nav__link">
    Fit
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#blocker" class="md-nav__link">
    Blocker
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#touch-events" class="md-nav__link">
    Touch events
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#set-interactive" class="md-nav__link">
    Set interactive
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-down" class="md-nav__link">
    Pointer down
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-up" class="md-nav__link">
    Pointer up
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-move" class="md-nav__link">
    Pointer move
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-over" class="md-nav__link">
    Pointer over
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-out" class="md-nav__link">
    Pointer out
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tap" class="md-nav__link">
    Tap
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#press" class="md-nav__link">
    Press
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#swipe" class="md-nav__link">
    Swipe
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#grid-points" class="md-nav__link">
    Grid points
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#other-properties" class="md-nav__link">
    Other properties
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
      
      
      
      
    </ul>
  
</nav>
    
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-15-3" type="checkbox" id="nav-15-3">
    
    <label class="md-nav__link" for="nav-15-3">
      Grid
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-15-3">
        Grid
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../board-quadgrid/" title="Quad" class="md-nav__link">
      Quad
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-hexagongrid/" title="Hexagon" class="md-nav__link">
      Hexagon
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-chessdata/" title="Chess data" class="md-nav__link">
      Chess data
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-shape/" title="Shape" class="md-nav__link">
      Shape
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-moveto/" title="Move to" class="md-nav__link">
      Move to
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-pathfinder/" title="Path finder" class="md-nav__link">
      Path finder
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-monopoly/" title="Monopoly" class="md-nav__link">
      Monopoly
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-fieldofview/" title="Field of view" class="md-nav__link">
      Field of view
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-match/" title="Match" class="md-nav__link">
      Match
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-hexagonmap/" title="Hexagon map" class="md-nav__link">
      Hexagon map
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-15-12" type="checkbox" id="nav-15-12">
    
    <label class="md-nav__link" for="nav-15-12">
      Mini board
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-15-12">
        Mini board
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../board-miniboard/" title="Mini board" class="md-nav__link">
      Mini board
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../board-bejeweled/" title="Bejeweled" class="md-nav__link">
      Bejeweled
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-16" type="checkbox" id="nav-16">
    
    <label class="md-nav__link" for="nav-16">
      Firebase
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-16">
        Firebase
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-auth/" title="Authentication" class="md-nav__link">
      Authentication
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-firestore/" title="Firestore" class="md-nav__link">
      Firestore
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-storage/" title="Storage" class="md-nav__link">
      Storage
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-16-4" type="checkbox" id="nav-16-4">
    
    <label class="md-nav__link" for="nav-16-4">
      Applications
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="2">
      <label class="md-nav__title" for="nav-16-4">
        Applications
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-leaderboard/" title="Leaderboard" class="md-nav__link">
      Leaderboard
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-files/" title="Files" class="md-nav__link">
      Files
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-singleroom/" title="Single room" class="md-nav__link">
      Single room
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-onlineuserlist/" title="Online user list" class="md-nav__link">
      Online user list
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-broadcast/" title="Broadcast" class="md-nav__link">
      Broadcast
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-itemtable/" title="Item table" class="md-nav__link">
      Item table
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../firebase-idalias/" title="ID-alias" class="md-nav__link">
      ID-alias
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item md-nav__item--nested">
    
      <input class="md-toggle md-nav__toggle" data-md-toggle="nav-17" type="checkbox" id="nav-17">
    
    <label class="md-nav__link" for="nav-17">
      Storage
    </label>
    <nav class="md-nav" data-md-component="collapsible" data-md-level="1">
      <label class="md-nav__title" for="nav-17">
        Storage
      </label>
      <ul class="md-nav__list" data-md-scrollfix>
        
        
          
          
          


  <li class="md-nav__item">
    <a href="../localstorage/" title="LocalStorage" class="md-nav__link">
      LocalStorage
    </a>
  </li>

        
          
          
          


  <li class="md-nav__item">
    <a href="../localforage/" title="LocalForage" class="md-nav__link">
      LocalForage
    </a>
  </li>

        
      </ul>
    </nav>
  </li>

    
      
      
      


  <li class="md-nav__item">
    <a href="../tools/" title="Tools" class="md-nav__link">
      Tools
    </a>
  </li>

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              <div class="md-sidebar md-sidebar--secondary" data-md-component="toc">
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    
<nav class="md-nav md-nav--secondary">
  
  
  
    <label class="md-nav__title" for="__toc">Table of contents</label>
    <ul class="md-nav__list" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#introduction" class="md-nav__link">
    Introduction
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#live-demos" class="md-nav__link">
    Live demos
  </a>
  
</li>
      
        <li class="md-nav__item">
  <a href="#usage" class="md-nav__link">
    Usage
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#install-plugin" class="md-nav__link">
    Install plugin
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#load-minify-file" class="md-nav__link">
    Load minify file
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-plugin" class="md-nav__link">
    Import plugin
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#import-class" class="md-nav__link">
    Import class
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#add-board-object" class="md-nav__link">
    Add board object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#custom-class" class="md-nav__link">
    Custom class
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#board-size" class="md-nav__link">
    Board size
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#add-chess" class="md-nav__link">
    Add chess
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#kick-out-event" class="md-nav__link">
    Kick-out event
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#remove-chess" class="md-nav__link">
    Remove chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#move-chess" class="md-nav__link">
    Move chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#swap-chess" class="md-nav__link">
    Swap chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#chess-tile-position" class="md-nav__link">
    Chess -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tile-position-chess" class="md-nav__link">
    Tile position -&gt; chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#world-position-chess" class="md-nav__link">
    World position -&gt; chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#contains" class="md-nav__link">
    Contains
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#for-each-tile" class="md-nav__link">
    For each tile
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tile-position-world-position" class="md-nav__link">
    Tile position -&gt; world position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#world-position-tile-position" class="md-nav__link">
    World position -&gt; tile position
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#world-position-grid-world-position" class="md-nav__link">
    World position -&gt; Grid world position
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ring-tile-position" class="md-nav__link">
    Ring -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#shape-tile-position" class="md-nav__link">
    Shape -&gt; tile position
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#line-tile-position" class="md-nav__link">
    Line -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#circle-tile-position" class="md-nav__link">
    Circle -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#rectangle-tile-position" class="md-nav__link">
    Rectangle -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#ellipse-tile-position" class="md-nav__link">
    Ellipse -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#triangle-tile-position" class="md-nav__link">
    Triangle -&gt; tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#polygon-tile-position" class="md-nav__link">
    Polygon -&gt; tile position
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#angle-between-world-position-of-2-tiles" class="md-nav__link">
    Angle between world position of 2 tiles
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#is-angle-in-cone" class="md-nav__link">
    Is angle in cone
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#direction-between-2-tiles" class="md-nav__link">
    Direction between 2 tiles
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#is-direction-in-cone" class="md-nav__link">
    Is direction in cone
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#opposite-direction" class="md-nav__link">
    Opposite direction
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#angle-snap-to-direction" class="md-nav__link">
    Angle snap to direction
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#align-world-position-to-grid" class="md-nav__link">
    Align world position to grid
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#is-overlapping-with-world-position" class="md-nav__link">
    Is overlapping with world position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#neighbors" class="md-nav__link">
    Neighbors
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#neighbor-tile-position" class="md-nav__link">
    Neighbor tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#neighbor-chess" class="md-nav__link">
    Neighbor chess
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tile-at-direction" class="md-nav__link">
    Tile at direction
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#empty-tile-position" class="md-nav__link">
    Empty tile position
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#get-all-chess" class="md-nav__link">
    Get all chess
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#fit" class="md-nav__link">
    Fit
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#blocker" class="md-nav__link">
    Blocker
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#touch-events" class="md-nav__link">
    Touch events
  </a>
  
    <nav class="md-nav">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#set-interactive" class="md-nav__link">
    Set interactive
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-down" class="md-nav__link">
    Pointer down
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-up" class="md-nav__link">
    Pointer up
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-move" class="md-nav__link">
    Pointer move
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-over" class="md-nav__link">
    Pointer over
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#pointer-out" class="md-nav__link">
    Pointer out
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#tap" class="md-nav__link">
    Tap
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#press" class="md-nav__link">
    Press
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#swipe" class="md-nav__link">
    Swipe
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#grid-points" class="md-nav__link">
    Grid points
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#other-properties" class="md-nav__link">
    Other properties
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
      
      
      
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          <div class="md-content">
            <article class="md-content__inner md-typeset">
              
                
                  <a href="https://github.com/rexrainbow/phaser3-rex-notes/edit/master/docs/board.md" title="Edit this page" class="md-icon md-content__icon">&#xE3C9;</a>
                
                
                  <h1>Board</h1>
                
                <h2 id="introduction">Introduction<a class="headerlink" href="#introduction" title="Permanent link">&para;</a></h2>
<p>Core object of Board system.</p>
<ul>
<li>Author: Rex</li>
<li>Member of scene</li>
</ul>
<h2 id="live-demos">Live demos<a class="headerlink" href="#live-demos" title="Permanent link">&para;</a></h2>
<ul>
<li><a href="https://codepen.io/rexrainbow/pen/QVrGpE">Touch events</a></li>
<li><a href="https://codepen.io/rexrainbow/pen/QWWVrMx">Get tileXY at direction</a></li>
<li><a href="https://codepen.io/rexrainbow/pen/aMBXOE">Line to tileXY array</a></li>
<li><a href="https://codepen.io/rexrainbow/pen/wLYmyw">Triangle to tileXY array</a></li>
<li><a href="https://codepen.io/rexrainbow/pen/LYYJmxE">Ellipse to tileXY array</a></li>
</ul>
<h2 id="usage">Usage<a class="headerlink" href="#usage" title="Permanent link">&para;</a></h2>
<p><a href="https://github.com/rexrainbow/phaser3-rex-notes/tree/master/examples/board">Sample code</a></p>
<h3 id="install-plugin">Install plugin<a class="headerlink" href="#install-plugin" title="Permanent link">&para;</a></h3>
<h4 id="load-minify-file">Load minify file<a class="headerlink" href="#load-minify-file" title="Permanent link">&para;</a></h4>
<ul>
<li>Load plugin (minify file) in preload stage
    <div class="codehilite"><pre><span></span><code><span class="nx">scene</span><span class="p">.</span><span class="nx">load</span><span class="p">.</span><span class="nx">scenePlugin</span><span class="p">(</span><span class="s1">&#39;rexboardplugin&#39;</span><span class="p">,</span> <span class="s1">&#39;https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexboardplugin.min.js&#39;</span><span class="p">,</span> <span class="s1">&#39;rexBoard&#39;</span><span class="p">,</span> <span class="s1">&#39;rexBoard&#39;</span><span class="p">);</span>
</code></pre></div></li>
<li>Add board object
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">board</span> <span class="o">=</span> <span class="nx">scene</span><span class="p">.</span><span class="nx">rexBoard</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">board</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h4 id="import-plugin">Import plugin<a class="headerlink" href="#import-plugin" title="Permanent link">&para;</a></h4>
<ul>
<li>Install rex plugins from npm
    <div class="codehilite"><pre><span></span><code>npm i phaser3-rex-plugins
</code></pre></div></li>
<li>Install plugin in <a href="../game/#configuration">configuration of game</a>
    <div class="codehilite"><pre><span></span><code><span class="kr">import</span> <span class="nx">BoardPlugin</span> <span class="nx">from</span> <span class="s1">&#39;phaser3-rex-plugins/plugins/board-plugin.js&#39;</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="p">{</span>
    <span class="c1">// ...</span>
    <span class="nx">plugins</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">scene</span><span class="o">:</span> <span class="p">[{</span>
            <span class="nx">key</span><span class="o">:</span> <span class="s1">&#39;rexBoard&#39;</span><span class="p">,</span>
            <span class="nx">plugin</span><span class="o">:</span> <span class="nx">BoardPlugin</span><span class="p">,</span>
            <span class="nx">mapping</span><span class="o">:</span> <span class="s1">&#39;rexBoard&#39;</span>
        <span class="p">},</span>
        <span class="c1">// ...</span>
        <span class="p">]</span>
    <span class="p">}</span>
    <span class="c1">// ...</span>
<span class="p">};</span>
<span class="kd">var</span> <span class="nx">game</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Phaser</span><span class="p">.</span><span class="nx">Game</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
</code></pre></div></li>
<li>Add board object
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">board</span> <span class="o">=</span> <span class="nx">scene</span><span class="p">.</span><span class="nx">rexBoard</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">board</span><span class="p">(</span><span class="nx">config</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h4 id="import-class">Import class<a class="headerlink" href="#import-class" title="Permanent link">&para;</a></h4>
<ul>
<li>Install rex plugins from npm
    <div class="codehilite"><pre><span></span><code>npm i phaser3-rex-plugins
</code></pre></div></li>
<li>Import class
    <div class="codehilite"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">Board</span><span class="p">,</span> <span class="nx">HexagonGrid</span><span class="p">,</span> <span class="nx">QuadGrid</span> <span class="p">}</span> <span class="nx">from</span> <span class="s1">&#39;phaser3-rex-plugins/plugins/board-components.js&#39;</span><span class="p">;</span>
</code></pre></div></li>
<li>Add board object
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">board</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Board</span><span class="p">(</span><span class="nx">scene</span><span class="p">,</span> <span class="nx">config</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h3 id="add-board-object">Add board object<a class="headerlink" href="#add-board-object" title="Permanent link">&para;</a></h3>
<ul>
<li>Quad board
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">board</span> <span class="o">=</span> <span class="nx">scene</span><span class="p">.</span><span class="nx">rexBoard</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">board</span><span class="p">({</span>
    <span class="nx">grid</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">gridType</span><span class="o">:</span> <span class="s1">&#39;quadGrid&#39;</span><span class="p">,</span>
        <span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">cellWidth</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">cellHeight</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;orthogonal&#39;</span>  <span class="c1">// &#39;orthogonal&#39;|&#39;isometric&#39;</span>
    <span class="p">},</span>
    <span class="nx">width</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
    <span class="nx">height</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">});</span>
</code></pre></div></li>
<li>Hexagon board
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">board</span> <span class="o">=</span> <span class="nx">scene</span><span class="p">.</span><span class="nx">rexBoard</span><span class="p">.</span><span class="nx">add</span><span class="p">.</span><span class="nx">board</span><span class="p">({</span>
    <span class="nx">grid</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">gridType</span><span class="o">:</span> <span class="s1">&#39;hexagonGrid&#39;</span><span class="p">,</span>
        <span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">cellWidth</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">cellHeight</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
        <span class="nx">staggeraxis</span><span class="o">:</span> <span class="s1">&#39;x&#39;</span><span class="p">,</span>   <span class="c1">// &#39;x&#39;|&#39;y&#39;</span>
        <span class="nx">staggerindex</span><span class="o">:</span> <span class="s1">&#39;odd&#39;</span> <span class="c1">// &#39;odd&#39;|&#39;even&#39;</span>
    <span class="p">},</span>
    <span class="nx">width</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
    <span class="nx">height</span><span class="o">:</span> <span class="mi">0</span>
<span class="p">});</span>
</code></pre></div></li>
</ul>
<p>Configuration</p>
<ul>
<li><code>grid</code> :<ul>
<li><code>gridType</code> :<ul>
<li><code>'quadGrid'</code> : <a href="../board-quadgrid/">Quad grid</a></li>
<li><code>'hexagonGrid'</code> : <a href="../board-hexagongrid/">hexagon grid</a></li>
</ul>
</li>
</ul>
</li>
<li><code>width</code> : Board width in tiles</li>
<li><code>height</code> : Board height in tiles</li>
</ul>
<h3 id="custom-class">Custom class<a class="headerlink" href="#custom-class" title="Permanent link">&para;</a></h3>
<ul>
<li>Define class
    <div class="codehilite"><pre><span></span><code><span class="kr">class</span> <span class="nx">MyBoard</span> <span class="kr">extends</span> <span class="nx">RexPlugins</span><span class="p">.</span><span class="nx">Board</span><span class="p">.</span><span class="nx">Board</span> <span class="p">{</span>
    <span class="nx">constructor</span><span class="p">(</span><span class="nx">scene</span><span class="p">)</span> <span class="p">{</span>
        <span class="kr">super</span><span class="p">(</span><span class="nx">scene</span><span class="p">,</span> <span class="p">{</span>
            <span class="nx">grid</span><span class="o">:</span> <span class="p">{</span>
                <span class="nx">gridType</span><span class="o">:</span> <span class="s1">&#39;quadGrid&#39;</span><span class="p">,</span>
                <span class="nx">x</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
                <span class="nx">y</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
                <span class="nx">cellWidth</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
                <span class="nx">cellHeight</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
                <span class="nx">type</span><span class="o">:</span> <span class="s1">&#39;orthogonal&#39;</span>  <span class="c1">// &#39;orthogonal&#39;|&#39;isometric&#39;</span>
            <span class="p">},</span>
            <span class="nx">width</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
            <span class="nx">height</span><span class="o">:</span> <span class="mi">0</span>
        <span class="p">});</span>
        <span class="c1">// ...</span>
    <span class="p">}</span>
    <span class="c1">// ...</span>
<span class="p">}</span>
</code></pre></div></li>
<li>Create instance
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">board</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MyBoard</span><span class="p">(</span><span class="nx">scene</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h3 id="board-size">Board size<a class="headerlink" href="#board-size" title="Permanent link">&para;</a></h3>
<ul>
<li>Width : Board width in tiles<ul>
<li>Get
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">width</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span>
</code></pre></div></li>
<li>Set
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">setBoardWidth</span><span class="p">(</span><span class="nx">width</span><span class="p">);</span>
</code></pre></div></li>
</ul>
</li>
<li>Height : Board height in tiles<ul>
<li>Get
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">height</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
</code></pre></div></li>
<li>Set
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">setBoardHeight</span><span class="p">(</span><span class="nx">height</span><span class="p">);</span>
</code></pre></div></li>
</ul>
</li>
</ul>
<h3 id="add-chess">Add chess<a class="headerlink" href="#add-chess" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">addChess</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">,</span> <span class="nx">align</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chess</code> : A game object.</li>
<li><code>tileX</code> , <code>tileY</code> , <code>tileZ</code> : Tile position.</li>
<li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY). Default is <code>true</code>.</li>
</ul>
<div class="admonition note">
<p class="admonition-title">Chess and tile position</p>
<ul>
<li>Any chess has a <strong>(tileX, tileY, tileZ)</strong> index</li>
<li>Any (tileX, tileY, tileZ) index contains only <strong>1</strong> chess.</li>
<li>(tileX, tileY) could have more then 1 chess with different tileZ index.</li>
<li>tileZ is not equal to <code>depth</code>.</li>
</ul>
</div>
<h4 id="kick-out-event">Kick-out event<a class="headerlink" href="#kick-out-event" title="Permanent link">&para;</a></h4>
<p>Board will fire <code>kickout</code> event when adding chess to an occupied grid.</p>
<div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;kickout&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">chessToAdd</span><span class="p">,</span> <span class="nx">occupiedChess</span><span class="p">,</span> <span class="nx">tileXYZ</span><span class="p">){</span>
<span class="p">})</span>
</code></pre></div>

<p><code>chessToAdd</code> kicks out <code>occupiedChess</code> at tile position <code>tileXYZ</code>(<code>{x,y,z}</code>).</p>
<h3 id="remove-chess">Remove chess<a class="headerlink" href="#remove-chess" title="Permanent link">&para;</a></h3>
<ul>
<li>Remove chess object from board
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">removeChess</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">destroy</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>chess</code> : A game object</li>
<li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li>
</ul>
</li>
<li>Remove chess at (tileX, tileY, tileZ) from board
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">removeChess</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">,</span> <span class="nx">destroy</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>tileX</code>, <code>tileY</code>, <code>tileZ</code> : Tile position</li>
<li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li>
</ul>
</li>
<li>Remove all chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">removeAllChess</span><span class="p">(</span><span class="nx">destroy</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>destroy</code> : Set <code>true</code> to desrtoy chess object.</li>
</ul>
</li>
</ul>
<h3 id="move-chess">Move chess<a class="headerlink" href="#move-chess" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">moveChess</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="nx">toTileX</span><span class="p">,</span> <span class="nx">toTileY</span><span class="p">,</span> <span class="nx">toTileZ</span><span class="p">,</span> <span class="nx">align</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chess</code> : A game object</li>
<li><code>toTileX</code>, <code>toTileY</code>, <code>toTileZ</code> : Target tile position</li>
<li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY).</li>
</ul>
<h3 id="swap-chess">Swap chess<a class="headerlink" href="#swap-chess" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">swapChess</span><span class="p">(</span><span class="nx">chessA</span><span class="p">,</span> <span class="nx">chessB</span><span class="p">,</span> <span class="nx">align</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chessA</code>, <code>chessB</code> : Game objects</li>
<li><code>align</code> : Set <code>true</code> to align (i.e. set position) chess to grid (tileX, tileY).</li>
</ul>
<h3 id="chess-tile-position">Chess -&gt; tile position<a class="headerlink" href="#chess-tile-position" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">tileXYZ</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">chessToTileXYZ</span><span class="p">(</span><span class="nx">chess</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chess</code> : A game object</li>
<li><code>tileXYZ</code> : <code>{x,y,z}</code> or <code>null</code> if chess is not added to board.</li>
</ul>
<h3 id="tile-position-chess">Tile position -&gt; chess<a class="headerlink" href="#tile-position-chess" title="Permanent link">&para;</a></h3>
<ul>
<li>Get chess at (tileX, tileY, tileZ)
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">chess</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">tileXYZToChess</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>chess</code> : A game object</li>
</ul>
</li>
<li>Get chess at (tileX, tileY)
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">tileXYToChessArray</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">);</span>
<span class="c1">// var out = board.tileXYToChessArray(tileX, tileY, out);</span>
</code></pre></div><ul>
<li><code>out</code> : An array of chess</li>
</ul>
</li>
<li>Get chess at tileZ
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">tileZToChessArray</span><span class="p">(</span><span class="nx">tileZ</span><span class="p">);</span>
<span class="c1">// var out = board.tileZToChessArray(tileZ, out);</span>
</code></pre></div><ul>
<li><code>out</code> : An array of chess</li>
</ul>
</li>
<li>Get chess from array of (tileX, tileY)
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">tileXYArrayToChessArray</span><span class="p">(</span><span class="nx">tileXYArray</span><span class="p">);</span>
<span class="c1">// var out = board.tileXYArrayToChessArray(tileXYArray, out);</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">tileXYArrayToChessArray</span><span class="p">(</span><span class="nx">tileXYArray</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">);</span>
<span class="c1">// var out = board.tileXYArrayToChessArray(tileXYArray, tileZ, out);</span>
</code></pre></div><ul>
<li><code>tileXYArray</code> : An array of tileXY <code>{x, y}</code></li>
<li><code>out</code> : An array of chess</li>
</ul>
</li>
</ul>
<h3 id="world-position-chess">World position -&gt; chess<a class="headerlink" href="#world-position-chess" title="Permanent link">&para;</a></h3>
<ul>
<li>Get chess at (worldX, worldY)
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">worldXYToChessArray</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">);</span>
<span class="c1">// var out = board.worldXYToChessArray(tileX, tileY, out);</span>
</code></pre></div><ul>
<li><code>out</code> : An array of chess</li>
</ul>
</li>
<li>Get chess at (worldX, worldY), tileZ
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">chess</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">worldXYToChess</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>chess</code> : A game object</li>
</ul>
</li>
<li>Get chess at (worldX, worldY)
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">chess</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">worldXYToChess</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>chess</code> : A game object at a tileZ.</li>
</ul>
</li>
</ul>
<h3 id="contains">Contains<a class="headerlink" href="#contains" title="Permanent link">&para;</a></h3>
<ul>
<li>Is (tileX, tileY) inside board?
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isTileInBoard</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">);</span>
</code></pre></div></li>
<li>Does (tileX, tileY, tileZ) have chess?
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isTileInBoard</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">contains</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">);</span>
</code></pre></div></li>
<li>Is chess inside board?
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isChessInBoard</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">exists</span><span class="p">(</span><span class="nx">chess</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>chess</code> : A game object</li>
</ul>
</li>
</ul>
<h3 id="for-each-tile">For each tile<a class="headerlink" href="#for-each-tile" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">forEachTileXY</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">tileXY</span><span class="p">,</span> <span class="nx">board</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">},</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">order</span><span class="p">);</span>
</code></pre></div>

<p>Iteration order :</p>
<div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">forEachTileXY</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">tileXY</span><span class="p">,</span> <span class="nx">board</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">},</span> <span class="nx">scope</span><span class="p">,</span> <span class="nx">order</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>order</code> :<ul>
<li><code>0</code>, or <code>x+</code> : Increasing x, increasing y.</li>
<li><code>1</code>, or <code>x-</code> : Decreasing x, increasing y.</li>
<li><code>2</code>, or <code>y+</code> : Increasing y, increasing x.</li>
<li><code>3</code>, or <code>y-</code> : Decreasing y, increasing x.</li>
</ul>
</li>
</ul>
<p>Or using for-loop</p>
<div class="codehilite"><pre><span></span><code><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">tileY</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">tileY</span> <span class="o">&lt;</span> <span class="nx">board</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span> <span class="nx">tileY</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">tileX</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">tileX</span> <span class="o">&lt;</span> <span class="nx">board</span><span class="p">.</span><span class="nx">width</span><span class="p">;</span> <span class="nx">tileX</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="c1">// ...</span>
    <span class="p">}</span>
<span class="p">}</span>
</code></pre></div>

<ul>
<li><code>board.width</code> , <code>board.height</code> : Board width/height in tiles.</li>
</ul>
<h3 id="tile-position-world-position">Tile position -&gt; world position<a class="headerlink" href="#tile-position-world-position" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">worldXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">tileXYToWorldXY</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">);</span>  <span class="c1">// worldXY: {x, y}</span>
<span class="c1">// var out = board.tileXYToWorldXY(tileX, tileY, out);</span>
</code></pre></div>

<h3 id="world-position-tile-position">World position -&gt; tile position<a class="headerlink" href="#world-position-tile-position" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">tileXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">worldXYToTileXY</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">);</span>  <span class="c1">// tileXY: {x, y}</span>
<span class="c1">// var out = board.worldXYToTileXY(worldX, worldY, out);</span>
</code></pre></div>

<h4 id="world-position-grid-world-position">World position -&gt; Grid world position<a class="headerlink" href="#world-position-grid-world-position" title="Permanent link">&para;</a></h4>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">gridWorldXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">worldXYSnapToGrid</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">);</span>
<span class="c1">// var out = board.worldXYSnapToGrid(worldX, worldY, out);</span>
</code></pre></div>

<h3 id="ring-tile-position">Ring -&gt; tile position<a class="headerlink" href="#ring-tile-position" title="Permanent link">&para;</a></h3>
<ul>
<li>Get array of tile position around a ring.
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">ringToTileXYArray</span><span class="p">(</span><span class="nx">centerTileXY</span><span class="p">,</span> <span class="nx">radius</span><span class="p">);</span>
<span class="c1">// var out = board.ringToTileXYArray(centerTileXY, radius, out);</span>
</code></pre></div><ul>
<li><code>centerTileXY</code> : Tile position <code>{x, y}</code> of ring center.</li>
<li><code>radius</code> : Radius of the ring.</li>
</ul>
</li>
<li>Get array of tile position within a filled ring.
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">filledRingToTileXYArray</span><span class="p">(</span><span class="nx">centerTileXY</span><span class="p">,</span> <span class="nx">radius</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">filledRingToTileXYArray</span><span class="p">(</span><span class="nx">centerTileXY</span><span class="p">,</span> <span class="nx">radius</span><span class="p">,</span> <span class="nx">nearToFar</span><span class="p">);</span>
<span class="c1">// var out = board.filledRingToTileXYArray(centerTileXY, radius, out);</span>
<span class="c1">// var out = board.filledRingToTileXYArray(centerTileXY, radius, nearToFar, out);</span>
</code></pre></div><ul>
<li><code>centerTileXY</code> : Tile position <code>{x, y}</code> of ring center.</li>
<li><code>radius</code> : Radius of the ring.</li>
<li><code>nearToFar</code> : From near ring to far ring. Default value is <code>true</code>.</li>
</ul>
</li>
</ul>
<h3 id="shape-tile-position">Shape -&gt; tile position<a class="headerlink" href="#shape-tile-position" title="Permanent link">&para;</a></h3>
<h4 id="line-tile-position">Line -&gt; tile position<a class="headerlink" href="#line-tile-position" title="Permanent link">&para;</a></h4>
<p>Get array of tile position along a line defined via (<code>startWorldX</code>, <code>startWorldY</code>) to (<code>endWorldX</code>, <code>endWorldY</code>)</p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">lineToTileXYArray</span><span class="p">(</span><span class="nx">startWorldX</span><span class="p">,</span> <span class="nx">startWorldY</span><span class="p">,</span> <span class="nx">endWorldX</span><span class="p">,</span> <span class="nx">endWorldY</span><span class="p">);</span>
<span class="c1">// var out = board.lineToTileXYArray(startWorldX, startWorldY, endWorldX, endWorldY, out);</span>
</code></pre></div>

<ul>
<li><code>startWorldX</code>, <code>startWorldY</code>, <code>endWorldX</code>, <code>endWorldY</code> : Start and end pointer of a line</li>
<li><code>out</code> : An array of tile position</li>
</ul>
<p>or</p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">lineToTileXYArray</span><span class="p">(</span><span class="nx">line</span><span class="p">);</span>
<span class="c1">// var out = board.lineToTileXYArray(line, out);</span>
</code></pre></div>

<ul>
<li><code>line</code> : <a href="../geom-line/">Line object</a></li>
</ul>
<h4 id="circle-tile-position">Circle -&gt; tile position<a class="headerlink" href="#circle-tile-position" title="Permanent link">&para;</a></h4>
<p>Get array of tile position inside a <a href="../geom-circle/">circle shape</a></p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">circleToTileXYArray</span><span class="p">(</span><span class="nx">circle</span><span class="p">);</span>
<span class="c1">// var out = board.circleToTileXYArray(circle, out);</span>
</code></pre></div>

<ul>
<li><code>circle</code> : <a href="../geom-circle/">Circle shape</a></li>
<li><code>out</code> : An array of tile position</li>
</ul>
<h4 id="rectangle-tile-position">Rectangle -&gt; tile position<a class="headerlink" href="#rectangle-tile-position" title="Permanent link">&para;</a></h4>
<p>Get array of tile position inside a <a href="../geom-rectangle/">rectangle shape</a></p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">rectangleToTileXYArray</span><span class="p">(</span><span class="nx">rectangle</span><span class="p">);</span>
<span class="c1">// var out = board.rectangleToTileXYArray(rectangle, out);</span>
</code></pre></div>

<ul>
<li><code>rectangle</code> : <a href="../geom-rectangle/">Rectangle shape</a></li>
<li><code>out</code> : An array of tile position</li>
</ul>
<h4 id="ellipse-tile-position">Ellipse -&gt; tile position<a class="headerlink" href="#ellipse-tile-position" title="Permanent link">&para;</a></h4>
<p>Get array of tile position inside a <a href="../geom-ellipse/">ellipse shape</a></p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">ellipseToTileXYArray</span><span class="p">(</span><span class="nx">ellipse</span><span class="p">);</span>
<span class="c1">// var out = board.ellipseToTileXYArray(ellipse, out);</span>
</code></pre></div>

<ul>
<li><code>ellipse</code> : <a href="../geom-ellipse/">Ellipse shape</a></li>
<li><code>out</code> : An array of tile position</li>
</ul>
<h4 id="triangle-tile-position">Triangle -&gt; tile position<a class="headerlink" href="#triangle-tile-position" title="Permanent link">&para;</a></h4>
<p>Get array of tile position inside a <a href="../geom-triangle/">triangle shape</a></p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">triangleToTileXYArray</span><span class="p">(</span><span class="nx">triangle</span><span class="p">);</span>
<span class="c1">// var out = board.triangleToTileXYArray(triangle, out);</span>
</code></pre></div>

<ul>
<li><code>triangle</code> : <a href="../geom-triangle/">Triangle shape</a></li>
<li><code>out</code> : An array of tile position</li>
</ul>
<h4 id="polygon-tile-position">Polygon -&gt; tile position<a class="headerlink" href="#polygon-tile-position" title="Permanent link">&para;</a></h4>
<p>Get array of tile position inside a <a href="../geom-polygon/">polygon shape</a></p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">polygonToTileXYArray</span><span class="p">(</span><span class="nx">polygon</span><span class="p">);</span>
<span class="c1">// var out = board.polygonToTileXYArray(polygon, out);</span>
</code></pre></div>

<ul>
<li><code>polygon</code> : <a href="../geom-polygon/">Polygon shape</a></li>
<li><code>out</code> : An array of tile position</li>
</ul>
<h3 id="angle-between-world-position-of-2-tiles">Angle between world position of 2 tiles<a class="headerlink" href="#angle-between-world-position-of-2-tiles" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">radian</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">angleBetween</span><span class="p">(</span><span class="nx">tileXY0</span><span class="p">,</span> <span class="nx">tileXY1</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>radian</code> : Angle between world position of 2 tiles, in radian.</li>
<li><code>tileXY0</code>, <code>tileXY1</code> : tile position <code>{x, y}</code></li>
</ul>
<h3 id="is-angle-in-cone">Is angle in cone<a class="headerlink" href="#is-angle-in-cone" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isInCone</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">isAngleInCone</span><span class="p">(</span><span class="nx">chessA</span><span class="p">,</span> <span class="nx">chessB</span><span class="p">,</span> <span class="nx">face</span><span class="p">,</span> <span class="nx">cone</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chessA</code>, <code>chessB</code> : Direction from chessA to chessB. Chess object, or tileXY. </li>
<li><code>face</code>, <code>cone</code> : Range of compared angle is between <code>face - (cone/2)</code> to <code>face + (cone/2)</code>. Angle in radian.</li>
</ul>
<h3 id="direction-between-2-tiles">Direction between 2 tiles<a class="headerlink" href="#direction-between-2-tiles" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">directionBetween</span><span class="p">(</span><span class="nx">chessA</span><span class="p">,</span> <span class="nx">chessB</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chessA</code>, <code>chessB</code> : A chess object, or tile position <code>{x,y}</code>.</li>
<li><code>direction</code> : Integer number.<ul>
<li><a href="../board-quadgrid/#directions">Quad grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>.</li>
<li><a href="../board-hexagongrid/#directions">Hexagon grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>.</li>
</ul>
</li>
</ul>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">directionBetween</span><span class="p">(</span><span class="nx">chessA</span><span class="p">,</span> <span class="nx">chessB</span><span class="p">,</span> <span class="kc">false</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>direction</code> : Integer number, or float number.<ul>
<li><a href="../board-quadgrid/#directions">Quad grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6, 6~7.</li>
<li><a href="../board-hexagongrid/#directions">Hexagon grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.</li>
</ul>
</li>
</ul>
<h3 id="is-direction-in-cone">Is direction in cone<a class="headerlink" href="#is-direction-in-cone" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isInCone</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">isDirectionInCone</span><span class="p">(</span><span class="nx">chessA</span><span class="p">,</span> <span class="nx">chessB</span><span class="p">,</span> <span class="nx">face</span><span class="p">,</span> <span class="nx">cone</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chessA</code>, <code>chessB</code> : Direction from chessA to chessB. Chess object, or tileXY. </li>
<li><code>face</code>, <code>cone</code> : Range of compared direction is between <code>face - (cone/2)</code> to <code>face + (cone/2)</code>. Integer number, or float number.<ul>
<li><a href="../board-quadgrid/#directions">Quad grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, or float number between 0~1, 1~2, 2~3, 3~4.</li>
<li><a href="../board-hexagongrid/#directions">Hexagon grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, or float number between 0~1, 1~2, 2~3, 3~4, 4~5, 5~6.</li>
</ul>
</li>
</ul>
<h3 id="opposite-direction">Opposite direction<a class="headerlink" href="#opposite-direction" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getOppositeDirection</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">,</span> <span class="nx">direction</span><span class="p">);</span>
</code></pre></div>

<h3 id="angle-snap-to-direction">Angle snap to direction<a class="headerlink" href="#angle-snap-to-direction" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">angleSnapToDirection</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="nx">angle</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>chess</code> : Chess object, or tileXY, or <code>undefined</code>.</li>
<li><code>angle</code> : Angle in radius.</li>
<li><code>direction</code> : Integer number.<ul>
<li><a href="../board-quadgrid/#directions">Quad grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code>, <code>7</code>.</li>
<li><a href="../board-hexagongrid/#directions">Hexagon grid</a> : <code>0</code>, <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>.</li>
</ul>
</li>
</ul>
<h3 id="align-world-position-to-grid">Align world position to grid<a class="headerlink" href="#align-world-position-to-grid" title="Permanent link">&para;</a></h3>
<ul>
<li>Align one chess object
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">gridAlign</span><span class="p">(</span><span class="nx">chess</span><span class="p">);</span>
</code></pre></div></li>
<li>Align all chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">gridAlign</span><span class="p">();</span>
</code></pre></div></li>
</ul>
<h3 id="is-overlapping-with-world-position">Is overlapping with world position<a class="headerlink" href="#is-overlapping-with-world-position" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isOverlapping</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">isOverlappingPoint</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">);</span>
</code></pre></div>

<p>or</p>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">isOverlapping</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">isOverlappingPoint</span><span class="p">(</span><span class="nx">worldX</span><span class="p">,</span> <span class="nx">worldY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">);</span>
</code></pre></div>

<h3 id="neighbors">Neighbors<a class="headerlink" href="#neighbors" title="Permanent link">&para;</a></h3>
<h4 id="neighbor-tile-position">Neighbor tile position<a class="headerlink" href="#neighbor-tile-position" title="Permanent link">&para;</a></h4>
<ul>
<li>Get neighbor tile position at 1 direction
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">neighborTileXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborTileXY</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="nx">direction</span><span class="p">);</span>
<span class="c1">// var out = board.getNeighborTileXY(srcTileXY, direction, out);</span>
</code></pre></div><ul>
<li><code>srcTileXY</code> : Tile position <code>{x, y}</code> of source.</li>
<li><code>direction</code> : Number, or string number.<ul>
<li><code>0</code> ~ <code>3</code> : <a href="../board-quadgrid/#directions">Quad grid</a> in 4 directions mode.</li>
<li><code>0</code> ~ <code>7</code> : <a href="../board-quadgrid/#directions">Quad grid</a> in 8 directions mode.</li>
<li><code>0</code> ~ <code>5</code> : <a href="../board-hexagongrid/#directions">Hexagon grid</a>.</li>
</ul>
</li>
<li><code>neighborTileXY</code> : Tile position <code>{x, y}</code> of neighbor. Retrun <code>null</code> if no neighbor there (i.e. source chess is at the edge of board.)</li>
</ul>
</li>
<li>Get neighbor tile position at directions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">neighborTileXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborTileXY</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="nx">directions</span><span class="p">);</span>
<span class="c1">// var out = board.getNeighborTileXY(srcTileXY, directions, out);</span>
</code></pre></div><ul>
<li><code>directions</code><ul>
<li>Array of numbers, <code>[0, 2, 4]</code>.</li>
<li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li>
</ul>
</li>
<li><code>out</code> : Tile position array of all neighbors</li>
</ul>
</li>
<li>Get neighbor tile position at all directions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborTileXY</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span>
<span class="c1">// var out = board.getNeighborTileXY(srcTileXY, null, out);</span>
</code></pre></div><ul>
<li><code>out</code> : Tile position array of all neighbors</li>
</ul>
</li>
<li>Get direction between 2 tile positions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborTileDirection</span><span class="p">(</span><span class="nx">srcTile</span><span class="p">,</span> <span class="nx">neighborTileXY</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>direction</code> : Return <code>null</code> if these 2 tile positions are not neighbors.</li>
</ul>
</li>
<li>Get neighbor tile position at angle
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">neighborTileXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborTileXYAtAngle</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="nx">angle</span><span class="p">);</span>
<span class="c1">// var out = board.getNeighborTileXY(srcTileXY, angle, out);</span>
</code></pre></div><ul>
<li><code>srcTileXY</code> : Tile position <code>{x, y}</code> of source.</li>
<li><code>angle</code> : Angle in radius.</li>
<li><code>neighborTileXY</code> : Tile position <code>{x, y}</code> of neighbor. Retrun <code>null</code> if no neighbor there (i.e. source chess is at the edge of board.)</li>
</ul>
</li>
</ul>
<h4 id="neighbor-chess">Neighbor chess<a class="headerlink" href="#neighbor-chess" title="Permanent link">&para;</a></h4>
<ul>
<li>Get neighbor chess at 1 direction
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">neighborChess</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborChess</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="nx">direction</span><span class="p">);</span> <span class="c1">// neighborTileZ = tileZ of chess</span>
<span class="c1">// var neighborChess = board.getNeighborChess(chess, direction, neighborTileZ);</span>
</code></pre></div><ul>
<li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li>
<li><code>direction</code> : Number, or string number.<ul>
<li><code>0</code> ~ <code>3</code> : <a href="../board-quadgrid/#directions">Quad grid</a> in 4 directions mode.</li>
<li><code>0</code> ~ <code>7</code> : <a href="../board-quadgrid/#directions">Quad grid</a> in 8 directions mode.</li>
<li><code>0</code> ~ <code>5</code> : <a href="../board-hexagongrid/#directions">Hexagon grid</a>.</li>
</ul>
</li>
<li><code>neighborChess</code> : A chess object.</li>
</ul>
</li>
<li>Get neighbor chess at directions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborChess</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="nx">directions</span><span class="p">);</span> <span class="c1">// neighborTileZ = tileZ of chess</span>
<span class="c1">// var out = board.getNeighborChess(chess, directions, neighborTileZ);</span>
</code></pre></div><ul>
<li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li>
<li><code>directions</code><ul>
<li>Array of numbers, <code>[0, 2, 4]</code>.</li>
<li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li>
</ul>
</li>
<li><code>out</code> : Chess array of neighbors.</li>
</ul>
</li>
<li>Get neighbor chess at all directions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborChess</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="kc">null</span><span class="p">);</span> <span class="c1">// neighborTileZ = tileZ of chess</span>
<span class="c1">// var out = board.getNeighborChess(chess, null, neighborTileZ);</span>
</code></pre></div><ul>
<li><code>chess</code> : A chess object, or tile position <code>{x,y,z}</code>.</li>
<li><code>out</code> : Chess array of all neighbors.</li>
</ul>
</li>
<li>Get direction between 2 chess
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">direction</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getNeighborChessDirection</span><span class="p">(</span><span class="nx">chess</span><span class="p">,</span> <span class="nx">neighborChess</span><span class="p">);</span>
</code></pre></div><ul>
<li><code>direction</code> : Return <code>null</code> if these 2 chess are not neighbors.</li>
</ul>
</li>
<li>Are 2 chess neighbors?
   <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">areNeighbor</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">areNeighbors</span><span class="p">(</span><span class="nx">chessA</span><span class="p">,</span> <span class="nx">chessB</span><span class="p">);</span>
</code></pre></div></li>
<li><code>areNeighbor</code> : Return <code>true</code> if <code>chessA</code> and <code>chessB</code> are neighbors.</li>
</ul>
<h3 id="tile-at-direction">Tile at direction<a class="headerlink" href="#tile-at-direction" title="Permanent link">&para;</a></h3>
<ul>
<li>Get tile position at 1 direction
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getTileXYAtDirection</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="nx">direction</span><span class="p">,</span> <span class="nx">distance</span><span class="p">);</span>
<span class="c1">// var out = board.getTileXYAtDirection(srcTileXY, direction, distance, out);</span>
</code></pre></div><ul>
<li><code>srcTileXY</code> : Tile position <code>{x, y}</code> of source.</li>
<li><code>direction</code> : Number, or string number.<ul>
<li><code>0</code> ~ <code>3</code> : <a href="../board-quadgrid/#directions">Quad grid</a> in 4 directions mode.</li>
<li><code>0</code> ~ <code>7</code> : <a href="../board-quadgrid/#directions">Quad grid</a> in 8 directions mode.</li>
<li><code>0</code> ~ <code>5</code> : <a href="../board-hexagongrid/#directions">Hexagon grid</a>.</li>
</ul>
</li>
<li><code>distance</code> : A JSON, number, or number array.<ul>
<li>JSON : Range of distances. <code>{end: 3}</code> is equal to <code>[1,2,3]</code>.
    <div class="codehilite"><pre><span></span><code><span class="p">{</span>
    <span class="nx">start</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="nx">end</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span>
    <span class="nx">step</span><span class="o">:</span> <span class="mi">1</span>
<span class="p">}</span>
</code></pre></div><ul>
<li><code>start</code> : Start distance. Default value is <code>1</code>.</li>
<li><code>end</code> : End distance. Default value is <code>1</code>.</li>
<li><code>step</code> : Step. Default value is <code>1</code>.</li>
</ul>
</li>
<li>Number, <code>3</code>.</li>
<li>Array of numbers, <code>[2, 3, 5]</code> : Array of distances.</li>
</ul>
</li>
<li><code>out</code> :<ul>
<li>A single tile position, if <code>distance</code> is a number.</li>
<li>Tile position <code>{x, y}</code> array, if <code>distance</code> is a JSON or an array.</li>
</ul>
</li>
</ul>
</li>
<li>Get tile positions at directions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">neighborTileXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getTileXYAtDirection</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="nx">directions</span><span class="p">,</span> <span class="nx">distance</span><span class="p">);</span>
<span class="c1">// var out = board.getTileXYAtDirection(srcTileXY, directions, distance, out);</span>
</code></pre></div><ul>
<li><code>directions</code><ul>
<li>Array of numbers, <code>[0, 2, 4]</code>.</li>
<li>String number concatenated via <code>,</code>, <code>'0,2,4'</code>.</li>
</ul>
</li>
<li><code>out</code> : Tile position <code>{x, y}</code> array.</li>
</ul>
</li>
<li>Get tile positions at all directions
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getTileXYAtDirection</span><span class="p">(</span><span class="nx">srcTileXY</span><span class="p">,</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">distance</span><span class="p">);</span>
<span class="c1">// var out = board.getTileXYAtDirection(srcTileXY, null, distance, out);</span>
</code></pre></div><ul>
<li><code>out</code> : Tile position <code>{x, y}</code> array.</li>
</ul>
</li>
</ul>
<h3 id="empty-tile-position">Empty tile position<a class="headerlink" href="#empty-tile-position" title="Permanent link">&para;</a></h3>
<ul>
<li>Get a random tile position which does not have any chess
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">tileXY</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getRandomEmptyTileXY</span><span class="p">(</span><span class="nx">tileZ</span><span class="p">);</span>
<span class="c1">// var out = board.getRandomEmptyTileXY(tileZ, out);</span>
</code></pre></div><ul>
<li><code>tileXY</code> : Tile position <code>{x, y}</code>, return <code>null</code> if all positions are occupied.</li>
</ul>
</li>
<li>Get an array of tile position which does not have any chess
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">tileXYArray</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getEmptyTileXYArray</span><span class="p">(</span><span class="nx">tileZ</span><span class="p">);</span>
<span class="c1">// var out = board.getEmptyTileXYArray(tileZ, out);</span>
</code></pre></div><ul>
<li><code>tileXYArray</code> : An array of tile position</li>
</ul>
</li>
</ul>
<h3 id="get-all-chess">Get all chess<a class="headerlink" href="#get-all-chess" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">chessArray</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getAllChess</span><span class="p">();</span>
</code></pre></div>

<h3 id="fit">Fit<a class="headerlink" href="#fit" title="Permanent link">&para;</a></h3>
<div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">fit</span><span class="p">(</span><span class="nx">tileXYArray</span><span class="p">);</span>
</code></pre></div>

<ul>
<li><code>tileXYArray</code> : An array of tile position <code>{x,y}</code>.</li>
</ul>
<p>Offset all of tile positions to <code>(0, 0)</code>, and set board size to fit these tile positions.</p>
<h3 id="blocker">Blocker<a class="headerlink" href="#blocker" title="Permanent link">&para;</a></h3>
<ul>
<li>Set blocker property : See <a href="../board-chessdata/#blocker">chess data</a></li>
<li>Has blocker at tile position (tileX, tileY, tileZ)
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">hasBlocker</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">hasBlocker</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">,</span> <span class="nx">tileZ</span><span class="p">);</span>
</code></pre></div></li>
<li>Any chess at (tileX, tileY) has <code>blocker</code> property
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">hasBlocker</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">hasBlocker</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h3 id="touch-events">Touch events<a class="headerlink" href="#touch-events" title="Permanent link">&para;</a></h3>
<h4 id="set-interactive">Set interactive<a class="headerlink" href="#set-interactive" title="Permanent link">&para;</a></h4>
<ul>
<li>Enable
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">setInteractive</span><span class="p">();</span>
</code></pre></div></li>
<li>Disable
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">setInteractive</span><span class="p">(</span><span class="kc">false</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h4 id="pointer-down">Pointer down<a class="headerlink" href="#pointer-down" title="Permanent link">&para;</a></h4>
<ul>
<li>Pointer down at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tiledown&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>pointer</code> : <a href="../touchevents/#properties-of-point">Touch pointer</a></li>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>Pointer down at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectdown&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pointerdown&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>pointer</code> : <a href="../touchevents/#properties-of-point">Touch pointer</a></li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="pointer-up">Pointer up<a class="headerlink" href="#pointer-up" title="Permanent link">&para;</a></h4>
<ul>
<li>Pointer up at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tileup&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>Pointer up at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectup&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pointerup&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>pointer</code> : <a href="../touchevents/#properties-of-point">Touch pointer</a></li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="pointer-move">Pointer move<a class="headerlink" href="#pointer-move" title="Permanent link">&para;</a></h4>
<ul>
<li>Pointer move to another tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tilemove&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>tileXY</code> : <code>{x, y}</code></li>
<li>Only triggered when <code>tileXY</code> is changed.</li>
</ul>
</li>
<li>Pointer move to another chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectmove&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pointermove&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>pointer</code> : <a href="../touchevents/#properties-of-point">Touch pointer</a></li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="pointer-over">Pointer over<a class="headerlink" href="#pointer-over" title="Permanent link">&para;</a></h4>
<ul>
<li>Pointer over to another tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tileover&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>tileXY</code> : <code>{x, y}</code></li>
<li>Only triggered when <code>tileXY</code> is changed.</li>
</ul>
</li>
<li>Pointer over to another chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectover&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pointerover&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>pointer</code> : <a href="../touchevents/#properties-of-point">Touch pointer</a></li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="pointer-out">Pointer out<a class="headerlink" href="#pointer-out" title="Permanent link">&para;</a></h4>
<ul>
<li>Pointer out tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tileout&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>tileXY</code> : <code>{x, y}</code></li>
<li>Only triggered when <code>tileXY</code> is changed.</li>
</ul>
</li>
<li>Pointer out chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectout&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pointerout&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pointer</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>pointer</code> : <a href="../touchevents/#properties-of-point">Touch pointer</a></li>
<li><code>gameObject</code> : Game object at pointer-out (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="tap"><a href="../gesture-tap/">Tap</a><a class="headerlink" href="#tap" title="Permanent link">&para;</a></h4>
<ul>
<li>Tap at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tiletap&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tap</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
    <span class="c1">// var tapsCount = tap.tapsCount;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>tap</code> : <a href="../gesture-tap/">Tap behavior</a>.<ul>
<li><code>tap.tapsCount</code> : Taps count.</li>
</ul>
</li>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>N-taps at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tile&#39;</span> <span class="o">+</span> <span class="nx">tapsCount</span> <span class="o">+</span> <span class="s1">&#39;tap&#39;</span> <span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tap</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>'tile' + tapsCount + 'tap'</code> : <code>'tile1tap'</code>, <code>'tile2tap'</code>, <code>'tile3tap'</code>, etc ...</li>
<li><code>tap</code> : <a href="../gesture-tap/">Tap behavior</a>.</li>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>Tap at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjecttap&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tap</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tapsCount = tap.tapsCount;</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.tap&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tap</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tapsCount = tap.tapsCount;</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>tap</code> : <a href="../gesture-tap/">Tap behavior</a>.<ul>
<li><code>tap.tapsCount</code> : Taps count.</li>
</ul>
</li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
<li>N-taps at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobject&#39;</span> <span class="o">+</span> <span class="nx">tapsCount</span> <span class="o">+</span> <span class="s1">&#39;tap&#39;</span> <span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tap</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.&#39;</span> <span class="o">+</span> <span class="nx">tapsCount</span> <span class="o">+</span> <span class="s1">&#39;tap&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">tap</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>'gameobject' + tapsCount + 'tap'</code> : <code>'gameobject1tap'</code>, <code>'gameobject2tap'</code>, <code>'gameobject3tap'</code>, etc ...</li>
<li><code>'board.' + tapsCount + 'tap'</code> : <code>'board.1tap'</code>, <code>'board.2tap'</code>, <code>'board.3tap'</code>, etc ...</li>
<li><code>tap</code> : <a href="../gesture-tap/">Tap behavior</a>.</li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="press"><a href="../gesture-press/">Press</a><a class="headerlink" href="#press" title="Permanent link">&para;</a></h4>
<ul>
<li>Press-start at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tilepressstart&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">press</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>press</code> : <a href="../gesture-press/">Press behavior</a>.</li>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>Press-end at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tilepressend&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">press</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>press</code> : <a href="../gesture-press/">Press behavior</a>.</li>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>Press-star at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectpressstart&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">press</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pressstart&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">press</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>press</code> : <a href="../gesture-tap/">Press behavior</a>.</li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
<li>Press-end at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectpressend&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">press</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.pressend&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">press</span><span class="p">)</span> <span class="p">{</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>press</code> : <a href="../gesture-tap/">Press behavior</a>.</li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h4 id="swipe"><a href="../gesture-swipe/">Swipe</a><a class="headerlink" href="#swipe" title="Permanent link">&para;</a></h4>
<ul>
<li>Swipe at any tile
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;tileswipe&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">swipe</span><span class="p">,</span> <span class="nx">tileXY</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var tileX = tileXY.x;</span>
    <span class="c1">// var tileY = tileXY.y;</span>
    <span class="c1">// var direction = swipe.direction;</span>
<span class="p">});</span>
</code></pre></div><ul>
<li><code>swipe</code> : <a href="../gesture-swipe/">Swipe behavior</a>.<ul>
<li><code>swipe.direction</code> : Integer number.<ul>
<li><a href="../board-quadgrid/#directions">Quad grid</a> : 0, 1, 2, 3, 4, 5, 6, 7.</li>
<li><a href="../board-hexagongrid/#directions">Hexagon grid</a> : 0, 1, 2, 3, 4, 5.</li>
</ul>
</li>
</ul>
</li>
<li><code>tileXY</code> : <code>{x, y}</code></li>
</ul>
</li>
<li>Swipe at chess
    <div class="codehilite"><pre><span></span><code><span class="nx">board</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;gameobjectswipe&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">swipe</span><span class="p">,</span> <span class="nx">gameObject</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var direction = swipe.direction;</span>
<span class="p">})</span>
</code></pre></div>
    or
    <div class="codehilite"><pre><span></span><code><span class="nx">gameObject</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;board.swipe&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">swipe</span><span class="p">)</span> <span class="p">{</span>
    <span class="c1">// var direction = swipe.direction;</span>
<span class="p">})</span>
</code></pre></div><ul>
<li><code>swipe</code> : <a href="../gesture-swipe/">Swipe behavior</a>.<ul>
<li><code>swipe.direction</code> : Integer number.<ul>
<li><a href="../board-quadgrid/#directions">Quad grid</a> : 0, 1, 2, 3, 4, 5, 6, 7.</li>
<li><a href="../board-hexagongrid/#directions">Hexagon grid</a> : 0, 1, 2, 3, 4, 5.</li>
</ul>
</li>
</ul>
</li>
<li><code>gameObject</code> : Game object at touched (tileX, tileY)</li>
</ul>
</li>
</ul>
<h3 id="grid-points">Grid points<a class="headerlink" href="#grid-points" title="Permanent link">&para;</a></h3>
<ul>
<li>Get an array of grid points at tile position (tileX, tileY).
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">points</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">getGridPoints</span><span class="p">(</span><span class="nx">tileX</span><span class="p">,</span> <span class="nx">tileY</span><span class="p">);</span>
<span class="c1">// var out = board.getGridPoints(tileX, tileY, out);</span>
</code></pre></div></li>
<li>Draw grid polygon on <a href="../graphics/#lines">graphics object</a>
    <div class="codehilite"><pre><span></span><code><span class="nx">graphics</span><span class="p">.</span><span class="nx">strokePoints</span><span class="p">(</span><span class="nx">points</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span>
</code></pre></div></li>
</ul>
<h3 id="other-properties">Other properties<a class="headerlink" href="#other-properties" title="Permanent link">&para;</a></h3>
<ul>
<li>Scene
    <div class="codehilite"><pre><span></span><code><span class="kd">var</span> <span class="nx">scene</span> <span class="o">=</span> <span class="nx">board</span><span class="p">.</span><span class="nx">scene</span><span class="p">;</span>
</code></pre></div></li>
</ul>
                
                  
                
                
              
              
                


              
            </article>
          </div>
        </div>
      </main>
      
        
<footer class="md-footer">
  
    <div class="md-footer-nav">
      <nav class="md-footer-nav__inner md-grid">
        
          <a href="../board-overview/" title="Overview" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-back md-footer-nav__button"></i>
            </div>
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Previous
                </span>
                Overview
              </span>
            </div>
          </a>
        
        
          <a href="../board-quadgrid/" title="Quad" class="md-flex md-footer-nav__link md-footer-nav__link--next" rel="next">
            <div class="md-flex__cell md-flex__cell--stretch md-footer-nav__title">
              <span class="md-flex__ellipsis">
                <span class="md-footer-nav__direction">
                  Next
                </span>
                Quad
              </span>
            </div>
            <div class="md-flex__cell md-flex__cell--shrink">
              <i class="md-icon md-icon--arrow-forward md-footer-nav__button"></i>
            </div>
          </a>
        
      </nav>
    </div>
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-footer-copyright">
        
        powered by
        <a href="https://www.mkdocs.org" target="_blank" rel="noopener">MkDocs</a>
        and
        <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
          Material for MkDocs</a>
      </div>
      
  <div class="md-footer-social">
    <link rel="stylesheet" href="../assets/fonts/font-awesome.css">
    
      <a href="https://twitter.com/rexrainbow" target="_blank" rel="noopener" title="twitter" class="md-footer-social__link fa fa-twitter"></a>
    
      <a href="https://github.com/rexrainbow/" target="_blank" rel="noopener" title="github" class="md-footer-social__link fa fa-github"></a>
    
  </div>

    </div>
  </div>
</footer>
      
    </div>
    
      <script src="../assets/javascripts/application.c33a9706.js"></script>
      
      <script>app.initialize({version:"1.0.4",url:{base:".."}})</script>
      
        <script src="../js/mermaid/mermaid.min.js"></script>
      
        <script src="../js/umlconvert.js"></script>
      
    
  </body>
</html>